<template>
    <view class="page">
        <!-- 商品 -->
        <view class="goods-data">
            <view class="goods-list" v-for="(item, index) in orderInfo.detail" :key="index">
                <view class="list">
                    <view class="thumb">
                        <image :src="item.logo" mode=""></image>
                    </view>
                    <view class="item">
                        <view class="title">
                            <text class="two-omit">{{ item.goods_name }}</text>
                        </view>
                        <view>
                            <text class="two-omit" style="font-size: 24rpx;">规格{{ item.sku_name }}</text>
                        </view>
                        <view class="price-num">
                            <view class="price">
                                <text>单价：</text>
                                <text class="action" style="color:red">￥{{ item.price }}</text>
                            </view>
                            <view class="num">
                                <text>数量：</text>
                                <text class="action">{{ item.num }}</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <!-- 申请数据 -->
        <view class="apply-data">
            <view class="apply-list">
                <view class="list" @click="isApplyCause = true">
                    <view class="title">
                        <text>申请原因</text>
                    </view>
                    <view class="more">
                        <text>{{ this.form.apply_refund_reason || '请选择申请原因' }}</text>
                        <text class="iconfont icon-more1"></text>
                    </view>
                </view>
                <view class="list">
                    <view class="title">
                        <text>申请金额</text>
                    </view>
                    <view class="more">
                        <input type="number" v-model="form.refund_price" placeholder="请输入退款金额" />
                    </view>
                </view>
                <view class="list describe">
                    <textarea placeholder="请具体描述申请原因" v-model="form.remark" />
                </view>
                <view class="voucher">
                    <view class="thumb">
                        <image src="/static/voucher_bg.png" mode=""></image>
                    </view>
                    <view class="thumb">
                        <image src="/static/img/wen_01.jpg" mode=""></image>
                        <text class="iconfont icon-close1"></text>
                    </view>
                    <view class="thumb">
                        <image src="/static/img/wen_01.jpg" mode=""></image>
                        <text class="iconfont icon-close1"></text>
                    </view>
                </view>
            </view>
        </view>
        <!-- 提交 -->
        <view class="submit-btn">
            <view class="btn" @click="submit">提交</view>
        </view>
        <!-- 申请原因弹窗 -->
        <view class="apply-cause-win cu-modal bottom-modal" :class="{ 'show': isApplyCause }"
            @click="isApplyCause = false">
            <view class="cu-dialog">
                <view class="title">申请原因</view>
                <view class="cause-list">
                    <view class="list" v-for="(item, index) in applyCauseList" :key="index"
                        @click="selectApplyCause(item)">
                        <view class="cause">{{ item }}</view>
                        <view class="check">
                            <text class="iconfont icon-check"></text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            isApplyCause: false,
            applyCauseList: "",
            orderInfo: {},
            form: {
                refund_price: 0,
                apply_refund_reason: "",
                remark: "",
            }
        };
    },
    async onLoad(options) {
        const { data } = await this.$http.order.orderDetail(options)
        this.orderInfo = data;

        const res = await this.$http.refund.getConfig()
        this.applyCauseList = res.data.only_refund;
        this.applyCauseList.push("其他")
        this.form.refund_price = data.pay_price
    },
    methods: {
        selectApplyCause(val) {
            this.form.apply_refund_reason = val
        },
        async submit() {
            if (!this.form.apply_refund_reason) {
                this.$toast("请选择退款原因")
                return;
            }
            if (!this.form.apply_refund_reason == "其他" && !this.form.remark) {
                this.$toast("请输入具体原因")
                return;
            }
            this.form.order_id = this.orderInfo.id
            this.form.order_no = this.orderInfo.order_no
            this.form.order_type = this.orderInfo.type
            this.form.refund_img = []
            this.form.apply_refund_data = this.orderInfo.detail.map(r => {
                return {
                    order_detail_id: r.id,
                    num: r.num,
                };
            })

            await this.$http.refund.apply(this.form)
        }
    },
}
</script>

<style scoped lang="scss">
@import './ReturnDetails.scss';
</style>
